<!-- 占道经营/占比数据 -->
<template>
  <div style="height: 100%">
    <checked-title
      :typeNumber="1"
      :width="348"
      title="类型案件占比"
    >
      <template #right>
        <div
          :class="active == item.value ? 'active' : ''"
          :key="index"
          @click="tabChange(item.value)"
          class="title2 pointer"
          v-for="(item, index) in tabList"
        >{{ item.title }}</div>
      </template>
    </checked-title>
    <div
      class="chunk_con"
      ref="ProportionData"
    ></div>
  </div>
</template>

<script>
import { getProportionDataScreen } from '@/api/index'
import { ZhanDaoJingYing } from '@/api'
export default {
  data() {
    return {
      tabList: [
        { title: '本日', value: '1' },
        { title: '本周', value: '2' },
        { title: '本月', value: '3' },
        { title: '本年', value: '4' }
      ],
      active: '4',
      echartsDone: true,
      num: 0
    }
  },
  mounted() {
    // this.renderChart();
    // this.getData()
    this.getList()
  },
  beforeDestroy() {
    this.desHander()
  },
  methods: {
    tabChange(active) {
      this.active = active
      // this.rankingList('tabChange');
      // this.getData()
      this.num = 0
      this.getList('tabChange')
    },
    //数据
    // getData(type) {
    //   const data = {
    //     type: this.active,
    //   }
    //   ZhanDaoJingYing.GetTypeCount(data)
    //     .then((res) => {
    //       if (type == 'tabChange') {
    //         this.desHander()
    //         this.$nextTick(() => {
    //           // this.renderChart();
    //           this.renderChart(res.data)
    //         })
    //       } else {
    //         this.renderChart(res.data)
    //       }
    //     })
    //     .catch((err) => {
    //     })
    // },
    // renderChart(arr) {
    //   let myChart = echarts.init(this.$refs.ProportionData)
    //   const proportionData = arr
    //   let proportionObj = []
    //   proportionData.forEach((item, index) => {
    //     const obj = {
    //       name: item.name,
    //       type: 'bar',
    //       barGap: '100%',
    //       barWidth: 8,
    //       data: item.value,
    //       showBackground: true,
    //       coordinateSystem: 'polar',
    //       backgroundStyle: {
    //         color: 'rgba(0, 152, 255, 0.1)',
    //       },
    //       // roundCap: true,
    //       itemStyle: {
    //         //柱体的颜色
    //         //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
    //         color: function(params) {
    //           var colorList = [
    //             ['rgba(35, 144, 255, 1)', 'rgba(61, 157, 255, 1)'],
    //             ['rgba(245, 51, 93, 0.92)', 'rgba(254, 230, 53, 0.92)'],
    //             ['rgba(61, 36, 243, 1)', 'rgba(69, 152, 255, 1)'],
    //             ['rgba(255, 17, 79, 1)', 'rgba(255, 101, 148, 1)'],
    //             ['rgba(18, 81, 210, 1)', 'rgba(27, 223, 252, 1)'],
    //           ]
    //           var index = params.seriesIndex
    //           if (params.seriesIndex >= colorList.length) {
    //             index = params.seriesIndex - colorList.length
    //           }
    //           return new echarts.graphic.LinearGradient(1, 1, 1, 0, [
    //             {
    //               offset: 1,
    //               color: colorList[index][0],
    //             },
    //             {
    //               offset: 0,
    //               color: colorList[index][1],
    //             },
    //           ])
    //         },
    //       },
    //     }
    //     proportionObj.push(obj)
    //   })
    //   let color = ['#3D9DFF', '#F5335D ', '#4598FF', '#FF6594', '#1BDFFC']
    //   let chartData = arr
    //   let arrName = []
    //   let arrValue = []
    //   let sum = 0
    //   let pieSeries = [],
    //     lineYAxis = []

    //   // 数据处理
    //   chartData.forEach((v, i) => {
    //     arrName.push(v.name)
    //     arrValue.push(v.value)
    //     sum = sum + v.value
    //   })
    //   // 图表option整理
    //   chartData.forEach((v, i) => {
    //     let chartnewData = chartData.slice(0, i)

    //     let newValue = chartnewData.reduce((a, b) => {
    //       return a + b.value
    //     }, 0)
    //     v.startAngle = (newValue / sum) * 360
    //     pieSeries.push({
    //       name: v.name,
    //       type: 'pie',
    //       clockWise: false,
    //       hoverAnimation: false,
    //       radius: [75 - i * 15 + '%', 68 - i * 15 + '%'],
    //       // radius: ['0%', '60%'],
    //       center: ['50%', '45%'],
    //       top: '0%',
    //       label: {
    //         show: false,
    //       },
    //       startAngle: v.startAngle + 90,
    //       data: [
    //         {
    //           value: v.value,
    //           name: v.name,
    //         },
    //         {
    //           value: sum - v.value,
    //           name: v.name,
    //           itemStyle: {
    //             color: 'rgba(0,0,0,0)',
    //           },
    //         },
    //       ],
    //     })
    //     pieSeries.push({
    //       name: v.name,
    //       type: 'pie',
    //       silent: true,
    //       z: 1,
    //       clockWise: false, //顺时加载
    //       hoverAnimation: false, //鼠标移入变大
    //       radius: [75 - i * 15 + '%', 68 - i * 15 + '%'],
    //       // radius: ['50%', '60%'],
    //       center: ['50%', '45%'],
    //       label: {
    //         show: false,
    //       },
    //       data: [
    //         {
    //           value: sum,
    //           itemStyle: {
    //             color: '#013561', //圆环颜色
    //           },
    //         },
    //         {
    //           value: 0,
    //           name: v.name,
    //           itemStyle: {
    //             color: 'red',
    //           },
    //         },
    //       ],
    //     })

    //     v.percent = ((v.value / sum) * 100).toFixed(0) + '%'
    //     lineYAxis.push({
    //       value: i,
    //       textStyle: {
    //         rich: {
    //           circle: {
    //             color: color[i],
    //             padding: [0, 5],
    //           },
    //         },
    //       },
    //     })
    //   })
    //   let option = {
    //     backgroundColor: 'rgba(15,24,44,0.1)',
    //     color: color,
    //     legend: {
    //       show: true,
    //       top: 'bottom',
    //       icon: 'circle',
    //       left: '60',
    //       bottom: 10,
    //       itemGap: 10,
    //       itemHeight: 6,
    //       itemWidth: 10,
    //       formatter: '{a|{name}}',
    //       textStyle: {
    //         rich: {
    //           a: {
    //             // color: '#ddd',
    //             // fontSize: 15,
    //             width: 110,
    //             height: 10,
    //             padding: [0, 0, 0, 1],
    //             fontSize: 12,
    //             color: '#fff',
    //           },
    //         },
    //       },
    //       data: proportionObj,
    //     },
    //     yAxis: [
    //       {
    //         type: 'category',
    //         inverse: true,
    //         axisLine: {
    //           show: false,
    //         },
    //         axisTick: {
    //           show: false,
    //         },
    //         axisLabel: {
    //           show: false,
    //         },
    //         data: lineYAxis,
    //       },
    //     ],
    //     xAxis: [
    //       {
    //         show: false,
    //       },
    //     ],
    //     series: pieSeries,
    //   }
    //   myChart.setOption(option, true)
    // },
    getList(type) {
      const data = {
        type: this.active
      }
      ZhanDaoJingYing.GetTypeCount(data)
        .then(res => {
          res.data.forEach(item => {
            let data = Number(item.value)
            this.num += data
          })
          const semiCircle = {
            value: this.num,
            itemStyle: {
              color: 'none',
              decal: {
                symbol: 'none'
              }
            },
            label: {
              show: false
            }
          }
          this.optionData = [...res.data, semiCircle]
          if (type == 'tabChange') {
            this.desHander()
            this.$nextTick(() => {
              this.renderChart()
            })
          } else {
            this.renderChart()
          }
        })
        .catch(err => {
        })
    },
    renderChart() {
      const myChart = echarts.init(this.$refs.ProportionData)
      let option = {
        color: ['#1F78B4', '#A6CEE3', '#B2DF8A', '#33A02C', '#FB9A99', '#E31A1C'],
        legend: {
          icon: 'circle',
          x: 'center',
          align: 'left',
          itemWidth: 8,
          itemGap: 8,
          textStyle: {
            color: '#CFD2D6'
          },
          // top: 'bottom',
          bottom: '30'
        },
        // title: {
        //   text: `${this.num}件\n案件总数`,
        //   textAlign: 'center',
        //   top: '30%',
        //   left: '48%',
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: 20,
        //     fontWeight: '400',
        //   },
        //   // subtext: '50%',
        //   subtextStyle: {
        //     color: '#021C25',
        //     fontSize: 32,
        //     fontWeight: '600',
        //     lineHeight: 60,
        //   },
        // },
        series: [
          {
            type: 'pie',
            radius: ['40%', '66%'],
            center: ['50%', '60%'],
            label: {
              show: false,
              fontSize: 16,
              // formatter: '{b}{c}',
              position: 'center'
            },
            startAngle: 180,
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold',
                formatter: '{value|{c}件}\n{name|{b}}',
                rich: {
                  name: {
                    color: '#fff',
                    fontSize: 20,
                    fontWeight: '400'
                  },
                  value: {
                    color: '#fff',
                    fontSize: 20,
                    fontWeight: '400'
                  }
                }
              }
            },
            avoidLabelOverlap: false,
            data: this.optionData
          }
        ]
      }
      myChart.setOption(option)
      // myChart.on('mouseover', function() {
      //   myChart.setOption({
      //     title: {
      //       show: false,
      //     },
      //   })
      // })
      // let self = this
      // myChart.on('mouseout', function() {
      //   myChart.setOption({
      //     title: {
      //       show: true,
      //       text: `${self.num}\n案件总数`,
      //       textAlign: 'center',
      //       top: '30%',
      //       left: '48%',
      //       textStyle: {
      //         color: '#fff',
      //         fontSize: 20,
      //         fontWeight: '400',
      //       },
      //       // subtext: '50%',
      //       subtextStyle: {
      //         color: '#021C25',
      //         fontSize: 32,
      //         fontWeight: '600',
      //         lineHeight: 60,
      //       },
      //     },
      //   })
      // })
    },
    desHander() {
      let myChart = echarts.init(this.$refs.ProportionData)
      myChart.dispose()
    }
  }
}
</script>

<style lang="less" scoped>
.chunk_con {
  height: calc(100% - 80px);
}
</style>
